<template>
	<view class="financePage">
		<view v-if="isshow" class="loading u-flex u-row-center u-row-center">
			<image style="width: 15vw;height: 15vw;" src="@/static/images/loadings.gif"></image>
		</view>
		<!-- 标题 -->
		<shopro-navbar :isBack="false" :backTextStyle="{
				color: '#272B33',
				fontSize: '36rpx',
				fontWeight: '400',
			}">
			<view slot="content" class="u-flex nav-wrap">
				<view @click="SelectCity" class="city">
					{{ city }}
					<u-icon name="arrow-down" size="24"></u-icon>
				</view>
				<view class="nav-item">文化金融</view>
			</view>
		</shopro-navbar>

		<!-- 搜索 -->
		<view class="search u-flex">
			<u-input class="searchipt" :clearable="false" :disabled="true" v-model="searchVal" @click="goSearch"
				placeholder="请输入搜索内容" />
			<view class="searchBtn" @click="goSearch">搜索</view>
		</view>
		<!-- 线条 -->
		<view class="viewline"></view>
		<view class="menu" v-if="tablist && tablist.length > 0" >
			<view @click="projiectList(item)" v-for="(item, index) in tablist"
				class="menuView">
				<image class="img" :src="item.image" mode="widthFix"></image>
				<view class="menuName">
					{{ item.name }}
				</view>
			</view>
		</view>
		<view class="financeCenter">
			<!-- 内容 -->
			<view class="financeContent">
				<view class="financeTitle">
					<text>名师</text>
					<view class="more" @click="goMore('1')">
						更多
						<image class="imgs" src="/static/images/finance/more.png" mode="widthFix"></image>
					</view>
				</view>
<!--				<view class="teacherList">-->
<!--					<view class="teacher" v-for="(item, index) in teacherData" :key="index" @click="handleDetail(item)">-->
<!--						<image class="teacherImg" :src="item.image" mode="aspectFill"></image>-->
<!--						<view class="teacherTel">-->
<!--							<text>{{ item.name }}</text>-->
<!--							&lt;!&ndash; <text class="tel">{{ item.mobile }}</text> &ndash;&gt;-->
<!--						</view>-->
<!--						<view class="teacherJj">-->
<!--							{{ item.desc }}-->
<!--						</view>-->
<!--					</view>-->
<!--				</view>-->
				<view class="moreContent">
					<view v-for="(item,index) in teacherData">
						<view class="moreList" @click="handleDetail(item)">
							<image class="imgs" :src="item.image" mode="aspectFill"></image>
							<view class="u-flex u-flex-col u-row-around u-m-l-20">
								<view class="cent-bo-b-l u-m-b-10 u-ellipsis-1" style="width: 63vw;display: flex;justify-content: flex-start">
									<view style="color:#333;font-weight: bold">{{item.name}}</view>
<!--									<view class="cent-bo-b-r u-m-l-20  u-ellipsis-1" style="color:#626161;font-weight: normal">{{item.job}}</view>-->
								</view>
								<view class="u-ellipsis-2" style="width: 63vw;" v-html="item.desc"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 内容二 -->
			<view class="financeContent">
				<view class="financeTitle">
					<text>公司</text>
					<view class="more" @click="goMore('2')">
						更多
						<image class="imgs" src="/static/images/finance/more.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="companyList">
					<view class="company" v-for="(item, index) in companyData" :key="index"
						@click="handleCompanyDetail(item)">
						<image class="companyImg" :src="item.image" mode="aspectFill"></image>
						<!-- <view> -->
						<view class="companyName">{{ item.project_name }}</view>
						<view class="address">
							<image class="img" src="/static/images/finance/address.png" mode="widthFix"></image>
							{{ item.address }}
						</view>
						<view class="companyType" v-html="item.project_content">
							<!-- <view v-if="item.tags">
                <view class="box" v-for="(v, i) in item.tags.split(',')">
                  {{ v }}
                </view>
              </view> -->
							<!-- <view class="box">高新技术企业</view>
                <view class="box">高新技术企业</view> -->
						</view>
						<!-- </view> -->
					</view>
				</view>
			</view>
			<!-- <view :style="{height:(statusBarHeight)+'px' }"></view> -->
		</view>
		<view style="text-align: center" class="xm" @click="handleJect">
			<view>
				<image src="../../static/xm.png" style="width: 30px; height: 30px; margin-top: 15px" mode=""></image>
			</view>
			提供服务
		</view>
		<shopro-auth-modal></shopro-auth-modal>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from "vuex";
	import qqmap from "@/components/qqmap-wx-jssdk.min.js";
	export default {
		data() {
			return {
				city: "定位中...",
				searchVal: "",
				teacherData: [],
				companyData: [],
				statusBarHeight: 0,
				navBarHeight: 44,
				tablist: [],
				countyId: "",
				isshow:true
			};
		},
		computed: {
			...mapGetters([
				"initShop",
				"homeTemplate",
				"userTemplate",
				"hasTemplate",
				"isLogin",
				"userInfo",
				"authType",
			]),

		},
		onLoad() {
			this.$nextTick(()=>{
				this.getmenu();
			})
			
		},
		onShow() {
			if( uni.getStorageSync("wenhua_shuanxi")=='1'||(uni.getStorageSync("countyIds")&&uni.getStorageSync("countyIds")!=uni.getStorageSync("countyId"))){
				uni.setStorageSync("countyId",uni.getStorageSync("countyIds"))
				this.isshow=true;
				this.$nextTick(()=>{
					this.getmenu();
				})
			}
			console.log(3333);
		},
		methods: {
			handleJect() {
				uni.setStorageSync("switch_tijiao","wenhua")
				console.log(this.userInfo);
				if (this.userInfo.is_vip == 0) {
					uni.navigateTo({
						url: "/pages/index/project_list/qrorder",
					});
				} else {
					uni.navigateTo({
						url: "/pages/index/projectProp/index?isvip=" +
							this.userInfo.is_vip +
							"&type=" +
							0,
					});
				}
			},
			getmenu() {
				this.$new_http("finance.menu").then((res) => {
					console.log(res, "menu");
					if (res.code === 1) {
						this.tablist = res.data;
					}
					console.log(
						uni.getStorageSync("countyName"),
						99999,
						uni.getStorageSync("cityName")
					);
					if (uni.getStorageSync("cityName")) {
						this.city = uni.getStorageSync("cityName");
						this.countyId = uni.getStorageSync("countyId");
					} else {
						this.getcity();
					}
					this.getlist();
				});
			},
			getlist() {
				this.$new_http("finance.list", {
					area_id: this.countyId,
				}).then((res) => {
					this.teacherData = res.data.teacher;
				});
				this.$new_http("finance.companyList", {
					area_id: this.countyId,
				}).then((res) => {
					this.companyData = res.data.data;
				});
				setTimeout(()=>{
					this.isshow = false;
				},1000)
				uni.setStorageSync("wenhua_shuanxi", 2);
			},
			// 搜索
			onSearch() {},

			SelectCity(e) {
				uni.navigateTo({
					url: "/pages/index/city_path/select_city/select_city",
				});
			},
			projiectList(e) {
				uni.setStorageSync("project_name",e.name);
				uni.navigateTo({
					url: "/pages/finance/teacher_list?id=" + e.id,
				});
			},
			getcity() {
				let qqmapsdk = new qqmap({
					key: "34GBZ-ZG66D-KV54R-P3DBA-L5F6O-QQFOT",
				});
				uni.getLocation({
					type: "gcj02",
					success: (e) => {
						console.log(e);
						qqmapsdk.reverseGeocoder({
							location: {
								latitude: e.latitude,
								longitude: e.longitude,
							},
							success: (res) => {
								console.log(res.result.address_component.city);
								this.city = res.result.address_component.city;
							},
						});
					},
				});
			},
			// 查看更多
			goMore(val) {
				uni.navigateTo({
					url: "/pages/finance/more?type=" + val,
				});
			},
			// 名师详情
			handleDetail(val) {
				uni.navigateTo({
					url: "/pages/finance/teacherDetail?val=" + val.id,
				});
			},
			// 公司
			handleCompanyDetail(val) {
				uni.navigateTo({
					url: "/pages/finance/companyDetail?val=" + val.id,
				});
			},
			goSearch() {
				uni.navigateTo({
					url: "/pages/index/seach/wcseach",
				});
			},
		},
	};
</script>

<style lang="scss">
.loading{
	position: fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;
	background: #fff;
	z-index: 10000;
}
	.financePage {
		min-height: 100%;
		background: #fff;
		padding-bottom: 80rpx;

		// padding-bottom: calc(env(safe-area-inset-bottom) / 2);
		.menu {
			display: flex;
			flex-wrap: wrap;
			width: 100%;
			padding: 0 25rpx;

			.menuView {
				margin-top: 20rpx;
				text-align: center;
				width: 20%;

				.img {
					width: 80rpx;
				}

				.menuName {
					font-size: 12px;
					color: #333;
				}
			}
		}

		// 标题栏
		.nav-wrap {
			width: 100%;
			padding: 0 30rpx;
			text-align: center;
		}

		.city {
			position: absolute;
			font-size: 28rpx;
		}

		.nav-item {
			width: 100%;
			font-size: 32rpx;
			font-weight: bold;
		}

		.financeCenter {
			padding: 0 30rpx;
		}

		.search {
			width: 92%;
			margin: 0 auto;
			height: 74rpx;
			background: #f5f5f5;
			border-radius: 37rpx;
			border: 1rpx solid #e5e5e5;
			margin-top: 20rpx;
			padding-left: 33rpx;
			padding-right: 10rpx;
			justify-content: space-between;

			.searchipt {
				font-size: 28rpx;
				// color: #999;
			}

			.searchBtn {
				width: 118rpx;
				height: 55rpx;
				background: #2c84ff;
				border-radius: 28rpx;
				color: #fff;
				font-size: 26rpx;
				text-align: center;
				line-height: 55rpx;
			}
		}

		.viewline {
			width: 100%;
			height: 12rpx;
			background: #f7f7f7;
			margin-top: 30rpx;
		}

		.financeContent {
			padding-top: 30rpx;

			.financeTitle {
				display: flex;
				justify-content: space-between;
				font-size: 30rpx;

				.more {
					font-size: 28rpx;
					color: #666;

					.imgs {
						width: 12rpx;
						margin-left: 16rpx;
					}
				}
			}

			.teacherList {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.teacher {
					width: 327rpx;
					// height: 390rpx;
					background: #ffffff;
					box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.12);
					border-radius: 20rpx;
					margin-top: 30rpx;
					padding: 0 24rpx;
					padding-bottom: 23rpx;

					.teacherImg {
						width: 170rpx;
						height: 170rpx;
						//border-radius: 50%;
						display: block;
						margin: 20rpx auto 26rpx;
					}

					.teacherTel {
						display: flex;
						justify-content: space-between;
						font-size: 28rpx;
						color: #333;

						.tel {
							font-size: 24rpx;
							color: #666666;
						}
					}

					.teacherJj {
						display: -webkit-box;
						overflow: hidden;
						text-overflow: ellipsis;
						word-break: break-all;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 3;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #333333;
						line-height: 33rpx;
						text-align: justify;
						font-style: normal;
						margin-top: 19rpx;
					}
				}
			}

			.companyList {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.company {
					width: 327rpx;
					// height: 182rpx;
					background: #ffffff;
					box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.12);
					border-radius: 20rpx;
					margin-top: 24rpx;
					padding: 0 24rpx;
					padding-bottom: 13rpx;

					.companyImg {
						width: 150rpx;
						height: 150rpx;
						margin-right: 24rpx;
						border-radius: 50%;
						display: block;
						margin: 20rpx auto 26rpx;
					}

					.companyName {
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #333333;
						margin-top: 23rpx;
						display: -webkit-box;
						overflow: hidden;
						text-overflow: ellipsis;
						word-break: break-all;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
					}

					.address {
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
						margin-top: 12rpx;
						display: -webkit-box;
						overflow: hidden;
						text-overflow: ellipsis;
						word-break: break-all;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;

						.img {
							width: 20rpx;
							height: 20rpx;
							margin-right: 10rpx;
						}
					}

					.companyType {
						display: flex;
						margin-top: 14rpx;
						flex-wrap: wrap;
						// padding-bottom: 20rpx;
						display: -webkit-box;
						overflow: hidden;
						text-overflow: ellipsis;
						word-break: break-all;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 3;

						.box {
							padding: 4rpx 11rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 20rpx;
							color: #2c84ff;
							border-radius: 18rpx;
							border: 1rpx solid #2c84ff;
							margin-right: 20rpx;
							margin-bottom: 10rpx;
						}
					}
				}
			}
		}
	}

	.xm {
		width: 70px;
		height: 70px;
		background: linear-gradient(180deg, #f7bb42 0%, #ed861f 100%);
		box-shadow: 0px 0px 8px 0px rgba(131, 86, 37, 0.2);
		position: fixed;
		bottom: 80px;
		right: 10px;
		font-size: 12px;
		color: #fff;
		z-index: 1;
		border-radius: 50%;
	}

	.xm image {
		width: 20px !important;
		height: 20px !important;
	}
	.moreContent {
		
		.moreList {
			width: 100%;
			padding: 24rpx 10rpx 24rpx 10rpx;
			background: #ffffff;
			border-radius: 16rpx;
			margin-top: 20rpx;
			display: flex;
			box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.12);
			.imgs {
				width: 170rpx;
				height: 170rpx;
				border-radius: 20rpx;
			}
			
			.moreRight {
				width: 431rpx;
				margin-left: 28rpx;
				
				.companyType {
					display: -webkit-box;
					overflow: hidden;
					text-overflow: ellipsis;
					word-break: break-all;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 3;
				}
				
				.name {
					font-family: PingFang;
					font-weight: bold;
					font-size: 32rpx;
					color: #000000;
				}
				
				.hite {
					margin-top: 20rpx;
					font-family: PingFang;
					font-weight: 500;
					font-size: 28rpx;
					color: #666666;
					line-height: 42rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
	}
</style>